<script setup>
import { onMounted, ref, computed, toRefs } from "vue";
import { VuePdf, createLoadingTask } from "vue3-pdfjs/esm";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
// import svgIcon from "@/components/svg-icon/SvgIcon.vue";
const props = defineProps({
  // pdfUrl 地址
  src: {
    type: String,
    default: () => '',
  },
});
const { src } = toRefs(props);
// 总页数
const numOfPages = ref(0);
//当前页数
const pdfPage = ref(1);
//当前放大的倍数
const pdfScale = ref(1);
//当前的PDF的url
const pdfSrc = ref(null);
// 初始化
onMounted(() => {
  pdfSrc.value = "/public/File/" + props.src;
  renewPdf();
});

const renewPdf = () => {
  const loadingTask = createLoadingTask(pdfSrc.value);
  loadingTask.promise
    .then((pdf) => {
      numOfPages.value = pdf.numPages;
    })
    .catch((err) => {
      console.log("获取pdf失败");
      //   message.error("PDF路径未找到");
    });
};

// 下一页
const previousPage = () => {
  if (pdfPage.value >= numOfPages.value) {
    console.log("到了最大页数");
  } else {
    pdfPage.value = pdfPage.value + 1;
  }
};

// 上一页
const nextPage = () => {
  if (pdfPage.value <= 1) {
    console.log("到了最小页数");
  } else {
    pdfPage.value = pdfPage.value - 1;
  }
};
const sizeChange = (num) => {
 pdfPage.value = num
};

// const scale = computed(() => `transform:scale(${pdfScale.value});position: relative;left: ${pdfScale.value <= 1 ? 0 : pdfScale.value * 15}%;top:${pdfScale.value <= 1 ? 0 : pdfScale.value * 37}%`)
const scale = computed(() => `transform:scale(${pdfScale.value});`);
const handleMenuClick = (item) => {
  pdfSrc.value = item.key.pdfSrc;
  numOfPages.value = 0;
  pdfPage.value = 1;
  renewPdf();
};

const finalSrc = computed(() => pdfSrc.value);
</script>

<template>
  <div class="pdf-preview">
    <div class="w-[100%] h-[96%]" style="overflow: auto">
      <template v-for="(page, index) in numOfPages" v-if="numOfPages > 0">
        <VuePdf
          :key="index"
          :style="scale"
          :src="finalSrc"
          :page="pdfPage"
          v-if="page == pdfPage"
        ></VuePdf>
      </template>
    </div>
    <div class="tool flex pt-[10px] pb-[10px]">
      <!-- <el-icon @click="nextPage" size="16"><ArrowLeft /></el-icon> -->
      <el-pagination @prev-click="nextPage" @next-click="previousPage" @current-change="sizeChange"  background layout="prev, pager, next" :total="numOfPages" />
      <!-- <el-icon @click="previousPage" size="16"><ArrowRight /></el-icon> -->
    </div>
  </div>
</template>

<style scoped>
.pdf-preview {
  width: 100%;
  height: 100%;
}

:deep(.css-dev-only-do-not-override-kqecok.ant-btn) {
  width: 360px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff;
  line-height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

:deep(.css-dev-only-do-not-override-kqecok).ant-btn {
  border: none;
  padding: 0;
  border-radius: 0;
  margin: 0 0.5px;
}
</style>
